<template>
	<view class="content">
		<view class="head-content">
			<view class="head-icon">
				<image :src="imgUrl+myInfor.avatar" mode=""></image>
			</view>
			<view class="my-name">
				<view>{{myInfor.nickname}}</view>
				<view class="open" @click="showMyInfor">
					<view v-if="language=='0'">個人信息管理</view>
					<view v-else>PIM</view>
					<image src="../../static/image/mine/open.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="my-journey">
			<view class="title">
				<view v-if="language=='0'">我的行程</view>
				<view v-else>Itineraries</view>
				<view class="to-open" @click="showAllJourney">
					<view  v-if="language=='0'">查看全部行程</view>
					<view v-else>View all itineraries</view>
					<image src="../../static/image/mine/open.png" mode=""></image>
				</view>
			</view>
			<view class="journey-content" v-for="(item,index) in undoneOrderList" @click="showOrderInfor(item)">
				<view class="journey-name">
					<view>{{item.car_type}}</view>
					<view class="to-open">
						<view v-if="language=='0'">未完成</view>
						<view v-else>unfinished</view>
						<image src="../../static/image/mine/open.png" mode=""></image>
					</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<image src="../../static/image/mine/time.png" mode=""></image>
						<view>{{item.createtime}}</view>
					</view>
					<view class="clear-btn" v-if="language=='0'" @click.stop="clearThisOrder(item.order_no)">取消</view>
					<view class="clear-btn" v-else @click.stop="clearThisOrder(item.order_no)">cancel</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<view class="start-point"></view>
						<view>{{item.start_address}}</view>
					</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<view class="end-point"></view>
						<view>{{item.end_address}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="other-serve">
			<view class="one-serve" @click="showMyWallet">
				<view class="left-infor">
					<image src="../../static/image/mine/walet.png" mode=""></image>
					<view v-if="language=='0'">錢包</view>
					<view v-else>Wallet</view>
				</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
			<view class="one-serve" @click="toInvite">
				<view class="left-infor">
					<image style="width:33rpx;margin-right:25rpx;" src='../../static/image/mine/goods.png' mode=""></image>
					<view v-if="language=='0'">邀請有獎</view>
					<view v-else>Invitation</view>
				</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
			<view class="one-serve" @click="showServe">
				<view class="left-infor">
					<image style="width:32rpx;margin-right:26rpx;" src="../../static/image/mine/service.png" mode=""></image>
					<view v-if="language=='0'">客服</view>
					<view v-else>Customer Service</view>
				</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
			<view class="one-serve" @click="showSetting">
				<view class="left-infor">
					<image style="width:31rpx;margin-right:26rpx;" src="../../static/image/mine/set.png" mode=""></image>
					<view v-if="language=='0'">設置</view>
					<view v-else>Setting</view>
				</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
			<view class="one-serve" @click="showSafety">
				<view class="left-infor">
					<image style="width:26rpx;margin-right:28rpx;" src="../../static/image/mine/safe.png" mode=""></image>
					<view v-if="language=='0'">安全</view>
					<view v-else>Safety Center</view>
				</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
		</view>
		<u-modal :show="showModel" :showCancelButton='true' @cancel="closeThisModel" @confirm='clearOrderOk'
			@close="closeThisModel" content="確定取消次行程嗎？" confirmColor='#D71B0A'
			:closeOnClickOverlay="true" confirm-text="確定" cancel-text="取消" width="538">
		</u-modal>
	</view>
</template>

<script>
	import { orderList,cancelOrder } from '@/request/api.js'
	export default {
		data() {
			return {
				undoneOrderList:[],
				showModel:false,
				clearOrderNo:''
			};
		},
		computed:{
			myInfor(){
				return this.$store.getters.myInfor
			},
			imgUrl(){
				return this.$store.state.user.imgUrl
			},
			language(){
				return this.$store.state.user.language
			}
		},
		onLoad() {
		
		},
		onShow() {
			this.$store.dispatch("user/getMyInfor");
			this.getOrderList()
			uni.setNavigationBarTitle({
				title:this.language=='0' ?'個人中心':"Personal Center"
			});
		},
		methods:{
			// 显示进行中订单详情
			showOrderInfor(e){
				let start_address = {
					latitude:e.start_latitude,
					longitude: e.start_longitude,
					addressName: e.start_address,
					address:e.start_address
				}
				let end_address = {
					latitude:e.end_latitude,
					longitude: e.end_longitude,
					addressName: e.end_address,
					address:e.end_address
				}
				this.$store.commit("address/CHANGE_START_ADDRESS", start_address);
				this.$store.commit("address/CHANGE_END_ADDRESS", end_address);
				this.$store.commit("order/CHANGE_ORDER_NUM",e.order_no);
				uni.navigateTo({
					url:'/pages/order-status/order-status'
				})
			},
			// 确认取消订单
			async clearOrderOk(){
				uni.showLoading({
					title:"取消中..."
				})
				let res = await cancelOrder({
					order_no:this.clearOrderNo
				})
				uni.hideLoading();
				console.log(res);
				if(res.code==1){
					uni.showToast({
						title:'取消成功',
						icon: 'none'
					})
					this.getOrderList()
					this.showModel=false;
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			closeThisModel(){
				this.showModel=false;
			},
			// 取消訂單
			clearThisOrder(e){
				this.clearOrderNo=e;
				this.showModel=true;
			},
			// 獲取訂單列表
			async getOrderList(){
				uni.showLoading({
					title:'加載中...'
				})
				let res = await orderList({
					status:1,
					page:1,
					limit:10
				})
				uni.hideLoading();
				console.log(res);
				if(res.code==1){
					this.undoneOrderList=res.data.data;
				}
			},
			// 邀請好友
			toInvite(){
				uni.navigateTo({
					url:'/pages/mine/invite/invite'
				})
			},
			// 显示我的信息
			showMyInfor(){
				uni.navigateTo({
					url:'/pages/my-infor/my-infor'
				})
			},
			// 顯示我的行程
			showAllJourney(){
				uni.navigateTo({
					url:'/pages/mine/my-journey/my-journey'
				})
			},
			// 显示我的钱包
			showMyWallet(){
				uni.navigateTo({
					url:'/pages/mine/my-wallet/my-wallet'
				})
			},
			// 显示客服
			showServe(){
				uni.navigateTo({
					url:'/pages/mine/customer-service/customer-service'
				})
			},
			// 顯示設置
			showSetting(){
				uni.navigateTo({
					url:'/pages/mine/setting/setting'
				})
			},
			// 显示安全设置
			showSafety(){
				uni.navigateTo({
					url:'/pages/mine/security-settings/security-settings'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
	}
	.head-content{
		width:100%;height:160rpx;background-color: #ffffff;
		display: flex;align-items: center;align-items: center;
		box-sizing: border-box;padding:0 48rpx;
		.head-icon{
			width:88rpx;height:88rpx;border-radius: 50%;
			overflow: hidden;
			image{
				width:88rpx;height:88rpx;
			}
		}
		.my-name{
			margin-left:14rpx;
			font-size:36rpx;line-height:50rpx;
			color:#040404;font-weight: bold;
		}
		.open{
			display: flex;align-items: center;
			margin-top:5rpx;
			font-size:24rpx;color:#9E9E9E;
			line-height:33rpx;
			image{
				width:10rpx;height:15rpx;
				margin-left:10rpx;
			}
		}
	}
	.my-journey{
		margin-top:24rpx;background-color:#ffffff;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(204,204,204,0.3);
		width:702rpx;margin-left:auto;margin-right:auto;
		box-sizing: border-box;padding:0 24rpx;border-radius: 20rpx;
		.title{
			display: flex;align-items: center;justify-content: space-between;
			height:90rpx;border-bottom:1px solid #F0F0F0;font-size:30rpx;
			color:#040404;
			.to-open{
				display: flex;align-items: center;font-size:24rpx;color:#9E9E9E;
				image{
					width:10rpx;height:15rpx;margin-left:10rpx;
				}
			}
		}
		.journey-content{
			padding:24rpx 0;
			.journey-name{
				display: flex;align-items: center;justify-content: space-between;
				font-size:30rpx;line-height:42rpx;
				color:#040404;
				.to-open{
					display: flex;align-items: center;font-size:24rpx;color:#9E9E9E;
					image{
						width:10rpx;height:15rpx;margin-left:10rpx;
					}
				}
			}
			.one-infor{
				display: flex;align-items: center;margin-top:24rpx;
				justify-content: space-between;
				.left-infor{
					display: flex;align-items: center;
					font-size:26rpx;color:#040404;
					image{
						width:24rpx;height: 24rpx;
						margin-right:24rpx;
					}
					.start-point{
						width:16rpx;height:16rpx;border-radius: 50%;
						background-color: #D71B0A;margin-right:26rpx;
					}
					.end-point{
						width:16rpx;height:16rpx;border-radius: 50%;
						background-color: #FC9A03;margin-right:26rpx;
					}
				}
				.clear-btn{
					width:88rpx;height:43rpx;display: flex;align-items: center;
					justify-content: center;background-color:#D71B0A;border-radius: 5rpx;
					font-size:24rpx;color:#ffffff;
				}
			}
		}
	}
	.other-serve{
		margin-top:24rpx;background-color:#ffffff;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(204,204,204,0.3);
		width:702rpx;margin-left:auto;margin-right:auto;
		box-sizing: border-box;padding:0 24rpx;border-radius: 20rpx;
		.one-serve{
			height:93rpx;display: flex;align-items: center;
			justify-content: space-between;
			.open{
				width:10rpx;height:15rpx;
			}
			.left-infor{
				display:flex;align-items: center;
				font-size:30rpx;color:#040404;
				image{
					width:34rpx;height:30rpx;
					margin-right:24rpx;
				}
			}
		}
	}
</style>
